<template>
  <div>
    <div class="homepage">
      <div class="index-content">
        <div class="timeInfo">
          <div class="detail">
            <span>{{ currentTime.slice(0, 11) }}</span>
            <span>{{ week }}</span>
            <h1 class="hour" >{{ currentTime.slice(11) }}</h1>
          </div>
        </div>
        <div class="WeatherInfo">
          <div class="detail">
            <div class="HL">
              <div>{{ Info.WeatherInfo.city }}</div>
              <span>
                {{ Info.Weather[0] && Info.Weather[0].high.slice(2) }}</span>
              <span>/</span>
              <span>
                {{ Info.Weather[0] && Info.Weather[0].low.slice(2) }}</span>
            </div>
            <div class="wind">
              <span>{{Info.Weather[0] && Info.Weather[0].fengxiang}}</span>
               <span>/</span>
              <span>
                {{ Info.Weather[0] && Info.Weather[0].fengli.slice(9,11) }}</span>
            </div>
            <div class="now">
              当前温度:
              <span class="temperature">{{ Info.WeatherInfo.wendu }} </span>
              <div class="type">
                <div>℃</div>
                <span>{{ Info.Weather[0] && Info.Weather[0].type }}</span>
              </div>
            </div>
          </div>
          提示:<span>{{ Info.WeatherInfo.ganmao }}</span>
        </div>
        <router-link class="search" to="/airInfo">查看室内空气质量详情</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import {getWeather111} from '@/api'
export default {
  name: "home",
  components: {},
  data() {
    return {
      timer: "", //定义一个定时器变量
      currentTime: "", //当前时间
      week: "", //星期几
      Info: {
        Weather: {},
        WeatherInfo: {},
      }, //天气状况
    };
  },
  created() {
    // this.getnowInfo()
    this.fnDate(); //获取时间函数立即执行一次
    this.gettime(); //每一秒都调用一下当前时间
    this.fnWeek(); //获取星期几
    this.getWeatherInfo(); //获取天气情况
    // this.getCity()
  },
  methods: {
    //   async getCity() {
    //   var result = await axios.get(
    //     "http://pv.sohu.com/cityjson?ie=utf-8"
    //   );
    //  const City = result.data.data.forecast[0];
    //  this.$set(this,'Weather',City)
    // },

    // async getWeatherInfo(){
    //       const result= await getWeather()
    //      this.$set(this.Info,'Weather',result.data.forecast)
    //      console.log(result.data.wendu);
    //      this.$set(this.Info,'WeatherInfo',result.data)
    // },

//  async getnowInfo(){
//      const result= await getWeather111()
//      console.log(result);
  
// },
    async getWeatherInfo() {
      const result = await axios.get(
        "http://wthrcdn.etouch.cn/weather_mini?city=上海"
      );
      const city = result.data.data.forecast;
      console.log(city);
      this.$set(this.Info, "Weather", city);
      this.$set(this.Info, "WeatherInfo", result.data.data);
    },
    gettime() {
      this.timer = setInterval(() => {
        this.fnDate();
      }, 1000);
    },
    //js 获取当前时间
    fnDate() {
      var date = new Date();
      var year = date.getFullYear(); //当前年份
      var month = date.getMonth(); //当前月份
      var data = date.getDate(); //天
      var hours = date.getHours(); //小时
      var minute = date.getMinutes(); //分
      var second = date.getSeconds(); //秒
      var time =
        year +
        "-" +
        this.fnW(month + 1) +
        "-" +
        this.fnW(data) +
        " " +
        this.fnW(hours) +
        ":" +
        this.fnW(minute) +
        ":" +
        this.fnW(second);
        this.$set(this, "currentTime", time);
    },
    //补位 当某个字段不是两位数时补0
    fnW(str) {
      var num;
      str > 9 ? (num = str) : (num = "0" + str);
      return num;
    },
    fnWeek() {
      const week = "星期" + "日一二三四五六".charAt(new Date().getDay());
      this.$set(this, "week", week);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style scoped lang='less'>
.homepage {
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  color: @airColor;
  background-image:url("../../assets/images/bg.png" );
  font-size: 20px;
  font-weight: 800;
  .index-content {
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    .timeInfo {
      width: 100%;
      height: 300px;
      .detail {
        width: 100vw;
        // height: 100%;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translate(-50%);
      }
        .hour{
          font-size: 60px;
        }
    }
    .WeatherInfo {
      text-align: center;
      .detail {
        display: flex;
        height: 180px;
        align-items: center;
        .HL {
          width: 30%;
        }
        .wind{
          width: 30%;
        }
        .now {
          width: 60%;
          .temperature {
            font-size: 50px;
          }
        }
        .type {
          display: inline-block;
        }
      }
    }
    .search {
      // height: 80px;
      // line-height: 80px;
      width: 300px;
      text-align: center;
      border-radius: 16px;
      position: absolute;
      top: 570px;
      left: 50%;
      transform: translate(-50%);
      font-size: 18px;
      // font-weight: 800;
      background-color:@airColor ;
      color:#fff;
    }
  }
}
</style>